<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录验证和表单选择</title>
    <link href="../css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <script src="../js/jquery-2.2.0.js"></script>

    <style>
        body {
            font-family: "微软雅黑";
            font-size: 1.6em;
            background: #c3d1ff;
        }

        a {
            cursor: pointer;
        }

        form, #test {
            border: #262f67 solid 2px;
            padding: 20px;
            background-color: #e0d6ff;
        }

        #remember {
            background-color: #daffae;
            vertical-align: -10%;
        }

        #single {
            vertical-align: top;
        }

        #multiple {
            height: 120px;
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <br>
    <h1>DOM操作——登录验证</h1>
    <hr>
    <br>
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <form action="" class="text-center">
                <h3>欢迎登陆！</h3>
                <hr>
                <div class="form-group">
                    <input class="form-control" id="email" type="email" value="请输入邮箱">
                </div>
                <div class="form-group">
                    <input class="form-control" id="password" type="" value="请输入密码">
                </div>
                <div class="form-group">
                    <label for=""><input type="radio" name="go"> 留 在 首 页 </label>&nbsp;&nbsp;
                    <label for=""><input type="radio" name="go"> 进 入 邮 箱 </label>
                </div>
                <div class="form-group">
                    <label for=""><input class="btn btn-success" id="login" type="submit" value=" 提 交 "></label>
                    &nbsp;&nbsp;&nbsp;
                    <label for="" id="remember"><input type="checkbox"> 记住密码 </label>
                </div>
                <div class="form-group">
                    <a> 免费注册 </a>&nbsp;&nbsp;<a> 忘记密码 </a>
                </div>
            </form>
        </div>
    </div>
    <br>
    <br>
    <br>
    <h1>DOM操作——各种输入框的选择</h1>
    <hr>
    <br>
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <form action="" class="text-center">
                <h3>选择验证！</h3>
                <hr>
                <div class="form-group">
                    <select id="single">
                        <option>钢琴</option>
                        <option>吉他</option>
                        <option>架子鼓</option>
                    </select>

                    <select id="multiple" multiple>
                        <option>水星</option>
                        <option>金星</option>
                        <option>地球</option>
                        <option>火星</option>
                        <option>木星</option>
                        <option>土星</option>
                    </select>
                </div>
                <div class="form-group" id="radio">
                    <input type="radio" name="object" value="太阳"> 太阳
                    <input type="radio" name="object" value="月亮"> 月亮
                    <input type="radio" name="object" value="星星"> 星星
                </div>
                <div class="form-group" id="checkbox">
                    <input type="checkbox" name="object" value="春天"> 春天
                    <input type="checkbox" name="object" value="夏天"> 夏天
                    <input type="checkbox" name="object" value="秋天"> 秋天
                    <input type="checkbox" name="object" value="冬天"> 冬天
                </div>
                <div id="test" class="form-group" style="color: red;background: #b2ffb3">
                    这是一个测试css样式的元素id="test" style="color: red;<br>background: #b2ffb3"
                </div>
                <div class="form-group">
                    <button id="btn_test" class="btn btn-primary">对上面id="test"元素进行测试</button>
                </div>
                <br>
            </form>
        </div>
    </div>
    <br>
    <br>

</div>
<script>
    $(function () {
        var $email = $("#email");
        var $pw = $("#password");
        $email.focus(function () {
            if (this.defaultValue == $(this).val())//this.defaultValue是js原生写法，不加$，没有括号。
                $(this).val("");
        }).blur(function () {
            if ("" == $(this).val())
                $(this).val(this.defaultValue)
        })
        $pw.focus(function () {
            $(this).attr("type", "password");
            if (this.defaultValue == $(this).val())
                $(this).val("");
        }).blur(function () {
            if ("" == $(this).val()) {
                $(this).val(this.defaultValue);
                $(this).attr("type", "");
            }
        })


        var $single = $("#single");
        var $multiple = $("#multiple");
        var $radio = $("#radio").children();//此处选择的必须是多个input元素，如果选中父元素再使用.val()是无效的
        var $checkbox = $("#checkbox").children();//此处选择的必须是多个input元素，如果选中父元素再使用.val()是无效的

        $single.val("吉他");
        $multiple.val(["金星", "火星", "土星"]);

        $radio.val(["月亮"]);
//        $(":radio[value=月亮]").attr("checked",true);
//        $checkbox.val(["春天","秋天"]);
        $(":checkbox[value=春天],:checkbox[value=秋天]").attr("checked", true);

//        遍历元素节点
        var $autumn = $("input[value='秋天']");
        var elements = $autumn.length;
//        elements = $autumn.parent().children().val();//遍历所有直接子元素,但.val()貌似只能弹出一个值
//        elements = $autumn.next().val();//后面紧邻的同辈元素
//        elements = $autumn.prev().val();//前面紧邻的同辈元素
//        elements = $autumn.siblings().val();//除了他自己之外的同辈元素
//        elements = $autumn.closest("div").children().length;//离他自己最近的div元素，从当前 逐级向上找
//        elements = $autumn.parent().attr("id");//直接的父元素
//        elements = $autumn.parents().length;//所有的父元素,依次往上找到body,共7个
//        alert(elements);

//        测试css样式
        $("#btn_test").click(function () {
            var $test = $("#test");
//            不能写成.css(),必须要跟参数，否则出错！！！
            $test.css({"opacity":"0.3","height":"100"}).height(90);

            var text1 = "获取到的css样式为：\ncolor：" + $test.css("color")
                    +"\nbackgroundColor："+$test.css("backgroundColor")
                    +"\nwidth："+$test.css("width")
                    +"\n.width()："+$test.width()
                    +"\nheight："+$test.css("height")
                    +"\n.height()："+$test.height()
                    +"\n.opacity："+$test.css("opacity")
                    +"\n.offset()："+$test.offset().left+","+$test.offset().top
                    +"\n.position()："+$test.position().left+","+$test.position().top
                    +"\n.窗口滚动条scrollLeft()："+$(window).scrollLeft()
                    +"\n.窗口滚动条scrollTop()："+$(window).scrollTop();
//            .width()和height()，无论设置和获取，都不是实际显示的宽度和高度 ！！！
            alert(text1);
            return false;
        })
    })

</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>